{% extends "base.html" %}

{% block title %}Edit your profile{% endblock %}
{% block head %}
<script type="text/javascript" src="{{ MEDIA_URL }}js/filestyle.js"></script>
<script type="text/javascript">
$(function() {
	$("input#id_photo").filestyle({ 
		image: "{{ MEDIA_URL }}images/input-file-browse.gif",
		imageheight : 24,
		imagewidth : 59,
		width : 180
	});
});

</script>
{% endblock %}

{% block header %}{% endblock %}

{% block primary-content %}
<span class="breadcrumbs"><a href="{% url index %}" title="Home">Home</a> &raquo; Reset Password</span>
<h2>Edit your profile</h2>
{% if success %}
<p class="page-intro">Profile updated successfully.</p>
{% endif %}
<div class="form-wrapper clearfix">
	<h3>Change your contact info, password, or photo.</h3>
	<form id="login" class="simple-form profile-edit" enctype="multipart/form-data" method="post">
		{% csrf_token %}
		{{ form.user_id }}
		<fieldset>
			<legend>Your info:</legend>
			<div class="form-item{% if form.first_name.errors %} error{% endif %}">
				 <label for="id_first_name">First name</label>
				 {{ form.first_name }}
			 </div>
			 <div class="form-item{% if form.last_name.errors %} error{% endif %}">
				 <label for="id_last_name">Last name</label>
				 {{ form.last_name }}
			 </div>
			 <div class="form-item{% if form.email.errors %} error{% endif %}">
				 <label for="id_email">Email</label>
				 {{ form.email }}
			 </div>
			 <div class="form-item{% if form.address.errors %} error{% endif %}">
				 <label for="id_address">Address</label>
				 {{ form.address }}
			 </div>
			 <div class="form-item{% if form.city.errors %} error{% endif %}">
				 <label for="id_city">City</label>
				 {{ form.city }}
			 </div>
			 <div class="form-item">
				 {{ form.state }}
			 </div>
		</fieldset>
		<fieldset>
			<legend>Enter a new password if you wish to change it.</legend>
			<div class="form-item{% if form.password1.errors or form.non_field_errors %} error{% endif %}">
			 <label for="id_password1">Password</label>
			 {{ form.password1 }}
		 </div>
		 <div class="form-item{% if form.password2.errors or form.non_field_errors %} error{% endif %}">
			 <label for="id_password2">Confirm password</label>
			 {{ form.password2 }}
		 </div>
		</fieldset>
		<fieldset>
			<legend>Upload a photo for your profile.</legend>
			<div id="photo-uploader" class="form-item{% if form.photo.errors %} error{% endif %}">
			 {{ form.photo }}
			</div>
			<p class="note">(Photos will be resized and cropped to 100 by 100px)</p>
        </fieldset>
        <fieldset>
            <div class="checkbox form-item{% if form.email_opt_in.errors %} error{% endif %}">
                {{ form.email_opt_in }}
                <label class="checkbox-label">Send me email updates about important news.</label>
            </div>
        </fieldset>
        <div class="form-input clear-left">
            <input class="button" type="submit" value="Save Profile"/>
        </div>
	</form>
</div><!--end .form-wrapper-->
{% endblock %}


